<template>
    <div>
        <header-1>
            <template v-slot:center>
               <span class="center">
                    活动详情
               </span>
            </template>
        </header-1>
        <p>{{arr.acName}}</p>
        <div class="main">
            <div class="left">
                <span>活动细则</span>
                <span>用户类型</span>
                <span v-if="arr.acAsk">店铺要求</span>
                <span>使用方式</span>
                <span>活动日期</span>
                <span>报名日期</span>
                <span v-if="arr.applicationExp">报名费用</span>
            </div>
            <div class="right1">
                <span>{{arr.rulesCh}}</span>
                <span>{{arr.userType}}</span>
                <span v-if="arr.acAsk">{{arr.acAsk}}</span>
                <span>{{arr.useType}}</span>
                <span>{{arr.acData}}</span>
                <span>{{arr.applicationData}}</span>
                <span v-if="arr.applicationExp" class="span1">₱{{arr.applicationExp}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import header1 from '../../components/BS/header1View.vue'
export default {
    name : 'DetaV',
    components:{
        header1,
    },
    data(){
        return{
            arr : ''
        }
    },
    created(){
        this.arr= this.$route.query.name
    },
}
</script>
<style scoped>
.main{
    width: 80%;
    display: flex;
    margin: 0 auto;
}
.right1{
    display: flex;
    flex-direction: column;
    color: #797979;
    font-size: 15px;
    width: 200px;
}
.left{
    display: flex;
    flex-direction: column;
    color: #333333;
    width: 80px;
    font-size: 15px;
}
p{
    text-align: center;
    color: #333333;
    font-size: 18px;
    font-weight: bold;
}
.left span,.right1 span{
    height: 50px;  
}
.span1{
    line-height: 23px;
}
</style>
